<template>
	<div class="category w-[200px] h-[793px] bg-white pt-[23px] relative">
		<div class="category__list">
			<div :class="['category__list__item', active === 0 && 'active']" @click="handleClick(0)">全部</div>
			<div v-for="(item, index) in list" :key="index" :class="['category__list__item flex justify-between items-center', active === item.id && 'active']" @click="handleClick(item.id)">
				<div>
					{{ item.name }}
				</div>
				<div v-if="active === item.id" class="flex items-center">
					<el-popover v-model="item.visible" placement="top" width="297" popper-class="category__popover">
						<div>
							<div class="mb-[16px] font-bold text-[12px]">分类名称</div>
							<el-input v-model.trim="title" placeholder="请输入分类名称" maxlength="10" show-word-limit></el-input>
							<div class="mt-[20px]">
								<el-button type="primary" class="w-[101px] h-[34px] !mr-[15px]" @click="handleSave">保存</el-button>
								<el-button class="w-[101px] h-[34px] !m-0" @click="item.visible = false">取消</el-button>
							</div>
						</div>
						<el-link slot="reference" :underline="false" type="primary" class="text-[12px]" @click="item.visible = true">编辑</el-link>
					</el-popover>

					<el-link :underline="false" type="primary" class="text-[12px] mx-[2px] !h-[10px]">|</el-link>
					<el-link :underline="false" type="danger" class="text-[12px]" @click.stop="handleRemove(item.id)">删除</el-link>
				</div>
			</div>
		</div>
		<div class="absolute bottom-[37px] left-[36px]">
			<el-popover v-model="visible" placement="top" width="297" popper-class="category__popover">
				<div>
					<div class="mb-[16px] font-bold text-[12px]">分类名称</div>
					<el-input v-model.trim="title" placeholder="请输入分类名称" maxlength="10" show-word-limit></el-input>
					<div class="mt-[20px]">
						<el-button type="primary" class="w-[101px] h-[34px] !mr-[15px]" @click="handleSave">保存</el-button>
						<el-button class="w-[101px] h-[34px] !m-0" @click="visible = false">取消</el-button>
					</div>
				</div>
				<el-button slot="reference" class="text-[#333333]" icon="el-icon-plus" :loading="loading">新增分类</el-button>
			</el-popover>
		</div>
	</div>
</template>

<script>
import { getStorage, createFileType, removeType } from '@/api/mall/file';
export default {
	data() {
		return {
			list: [],
			active: 0,
			title: null,
			visible: false,
			loading: false,
		};
	},
	watch: {
		visible() {
			this.title = null;
		},
	},
	created() {
		this.storage();
	},
	methods: {
		//加上延迟是为了有体验效果
		storage() {
			this.loading = true;
			getStorage()
				.then((res) => {
					setTimeout(() => {
						this.list = res.data.map((item) => ({
							...item,
							visible: false,
						}));
					}, 500);
				})
				.finally(() => {
					setTimeout(() => {
						this.loading = false;
					}, 500);
				});
		},
		handleSave() {
			if (!this.title) {
				this.$message.error('请输入分类名称');
				return;
			}
			createFileType({
				name: this.title,
			}).then(() => {
				this.visible = false;
				this.storage();
			});
		},
		handleClick(index) {
			this.active = index;
			this.$emit('getList', index === 0 ? null : index);
		},
		handleRemove(id) {
			this.$dialogRemove('确定删除该分类吗？').then((res) => {
				removeType([id])
					.then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!',
						});
					})
					.finally(() => {
						this.storage();
						res.hide();
						res.loading(false);
					});
			});
		},
	},
};
</script>
<style lang="scss">
.category__popover {
	box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.16);
	border-radius: 20px;
	padding: 27px;
}
</style>
<style lang="scss" scoped>
.category {
	border: 1px solid #e5e5e5;
	overflow-y: auto;
	&__list {
		height: calc(100% - 100px);
		overflow-y: auto;
		&::-webkit-scrollbar {
			width: 6px;
			height: 6px;
			background: #bebaba;
		}
		&::-webkit-scrollbar-thumb {
			background: #e2e2e2;
			transition: 1s;
		}
		&__item {
			@apply text-[#333333] text-[12px] h-[40px] pl-[36px] pr-[12px] cursor-pointer;
			line-height: 40px;
		}
		.active {
			background: #f5f7fb;
			color: #1a2483;
		}
	}
}
</style>
